<template>
	<view class="list-item none">
        <view class="contanier flex">
            <view class="flex u-font-20">
                [推荐人数] {{ model.downline }}
            </view>
            <view class="body-panel flex u-m-t-20 u-m-b-20">
                <view class="title">
                    <text v-if="HasChild" class="arrow" :class="isOpenOrClose" @click="openExpand(model, num)"></text>
                    <text class="t-icon m-dep"></text>
                    {{ model.name }}
                </view>
                <view class="time" @click="handlelookDetails(model)">详情</view>
            </view>
            <view class="flex u-m-b-10 u-font-20">
                [返利]<text class="rebate_total u-m-t-2">￥{{ model.rebate_total }}</text>
            </view>
        </view>
        <view class="box" v-if="HasChild && model.isExpand">
            <treeItem
                v-for="(m, i) in model.item"
                :num="i"
                @openExpand="openExpand"
                :model="m"
                :key="i">
            </treeItem>
        </view>
	</view>
</template>

<script>
    import treeItem from './tree.vue'
	export default {
        props: {
            model: {
                type: Object,
                default() {
                    return {}
                }
            },
            num: {
                type: String,
                default: ''
            }
        },
        components: {
            treeItem
        },
        computed: {
            HasChild() {
                return this.model.item.length > 0
            },
            isOpenOrClose() {
                return this.model.isExpand ? 'open' : 'close'
            }
        },
        methods: {
            //打开下一级
            openExpand(m, i) {
                this.$emit('openExpand', m, i)
            },
            //详情
            handlelookDetails(m) {
                uni.navigateTo({
                    url:"/mine-module/distribution/my-performance?member_id=" + m.id
                })
            }
        }
	}
</script>

<style lang="scss">
    .list-item {
        padding-right: 0;
        position: relative;
        .flex {
            display: flex;
            justify-content: flex-start;
        }
        .contanier {
            padding-left: 52rpx;
            padding-right: 20rpx;
            flex-direction: column;
            .body-panel {
                flex-direction: row;
                justify-content: space-between;
                .title{
                    position: relative;
                    .arrow{
                        position: absolute;
                        width:0;
                        height: 0;
                        top: 8rpx;
                        left: -26rpx;
                        border-style: solid;
                        z-index: 1;
                        &.close {
                            border-width: 12rpx 0 12rpx 12rpx;
                            border-color: transparent transparent transparent #aaa;
                        }
                        &.open {
                            top: 8rpx;
                            border-width: 12rpx 12rpx 0;
                            border-color: #aaa transparent transparent;
                        }
                    }
                    .t-icon{
                        display: inline-block;
                        width: 36rpx;
                        height: 36rpx;
                        background-size: 100% 100% !important;
                        vertical-align: middle;
                        margin: -6rpx 4rpx 0 0;
                        &.m-dep{
                            background: url();
                        }
                    }
                }
                .time{
                    font-size: 28rpx;
                    color: #ff853f;
                }
            }
            .rebate_total {
                color: #DF3A01;
            }
        }
        .box {
            display: block;
            padding-left: 108rpx;
            box-shadow: none;
            .list-item {
                &.node:not(:last-child) .line{
                  content: '';
                  display: block;
                  background-color: #ddd;
                  position: absolute;
                  width: 1rpx;
                  height: 100%;
                  left: -72rpx;
                  top: -76rpx;
                }
                &::after, &::before {
                    content: '';
                    display: block;
                    background-color: #ddd;
                    position: absolute;
                }
                &::before {
                    width: 2rpx;
                    height: 140rpx;
                    left: -72rpx;
                    top: -80rpx;
                }
                &::after {
                    width: 96rpx;
                    height: 2rpx;
                    left: -70rpx;
                    top: 60rpx;
                }
            }
        }
    }
</style>
